<template>
	<view class="shoplist" :style="{ marginTop: source.margin + 'px', marginBottom: source.margin2 + 'px' }">
		<view class="title">
			<view>附近商家</view>
		</view>
		<view class="tab" v-if="source.is_show_nav">
			<view :class="{ act: currentTap === index }" v-for="(item, index) in navList" :key="index" v-if="item.checked" @tap="change(item, index)">{{ item.name }}</view>
		</view>		
		<view class="list">
			<navigator class="item" hover-class="none" :url="'/shop/index?id='+item.id" v-for="(item, idx) in list" :key="idx">
				<view class="image">
					<image :src="url + item.logo"></image>
				</view>
				<view class="desc">
					<view class="name">{{ item.shop_name }}</view>
					<view class="star">
						<image :src="item.evaluationAvg >= x ? '/static/start_act.png' : '/static/start.png'" v-for="x in 5" :key="x"></image>
					</view>
					<!-- <view class="sell">距离: {{ item.distance }}</view> -->
					<view class="send">
						<view>起送：{{ item.starting_fee }}</view>
						<view>销售量：{{ item.sell_count || 0 }}</view>
					</view>
					<view class="address">
						<view>
							地址：{{ item.address }}
						</view>
						<view>
							距离：{{ item.distance }}
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import { getShop } from '@/common/api/lbt'
	import { baseURL } from '@/common/utils/config'
	import qqMap from '@/common/utils/qqmap-wx-jssdk.min'	
	
	export default {
		props: {
			source: [Object]
		},
		data () {
			return {
				list: [],
				navList: [],
				url: baseURL,
				currentTap: 0,
				params: {
					order_type: 0,
					latitude: '',
					longitude: ''
				}
			}
		},
		watch: {
			params: {
				handler (val, oldval) {
					this.getList()
				},
				deep: true
			}
		},
		created() {
			this.getList()
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					this.params.latitude = res.latitude
					this.params.longitude = res.longitude
					this.$store.commit('SET_LOCATION', { latitude: res.latitude, longitude: res.longitude })
					const qqMapSdk = new qqMap({ key: 'CRZBZ-4MTK6-Z6DSO-MCI7X-LUTGV-73B5X' })
					qqMapSdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: addr => {
							this.$store.commit('SET_USERCITY', addr.result.ad_info)
						}
					})
				},
				fail: error => {
					uni.showToast({
						icon: 'none',
						title: '获取位置失败'
					})
				}
			})		
		},
		methods: {
			change (item, idx) {
				this.params.order_type = item.type
				this.currentTap = idx
			},
			getList () {
				getShop(this.params).then(res => {
					this.$nextTick(() => {
						 this.navList = this.source.nav_list1.map((item, index) => {
						 	item.type = this.source.nav_list1.length - 1 - index
						 	return item
						 }) 
					})					
					this.list = res.recommend.filter(item => this.source.img_list.some(m => m.shop_name === item.shop_name && (m.supplyId === item.id || m.type_id === item.id)))
					this.list = this.list.map(item => {
						if (item.distance >= 1000) {
							item.distance = `${this.utils.Fxied(this.utils.accEqu(item.distance, 1000), 0)}km`
						}  else {
							item.distance = `${item.distance}m`
						}
						return item
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';
.shoplist {
	background: white;	
	.title {
		height: @height;
		display: flex;
		align-items: center;
		padding: 0 15upx;
		.border-bottom;
		& > view {
			border-left: 5px solid @red;
			padding: 0 0 0 15upx;
		}
	}
	.tab {
		background-color: white;
		height: @height;
		display: flex;
		align-items: center;
		.border-bottom;
		& > view {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&::after {
				position: absolute;
				bottom: 0;
				left: 0;
				content: '';
				width: 100%;
				height: 2px;
				background-color: @red;
				transform: scaleX(0);
				transition: all .2s;
			}
			&.act {
				color: @red;
				font-weight: 600;
				&::after {
					transform: scaleX(.5)
				}
			}
		}
	}	
	.list {
		.item {
			padding: 20upx 15upx;
			&:not(:last-of-type) {
				.border-bottom(15upx)
			}
			display: flex;
			justify-content: space-between;
			.image {
				width: 200upx;
				height: 200upx;
				margin-right: 20upx;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.desc {
				flex: 1;
				.star {
					display: flex;
					padding: 10upx 0;
					image {
						width: 20upx;
						height: 20upx;
						display: block;
						&:not(:last-of-type) {
							margin-right: 6upx;
						}
					}					
				}
				.sell {
					font-size: @minSize;
					margin-bottom: 10upx;
				}
				.send {
					display: flex;
					margin-bottom: 10upx;
					& > view {
						font-size: @minSize;
						&:nth-of-type(1) {
							margin-right: 15upx;
							position: relative;
							padding-right: 15upx;
							&::after {
								height: 100%;
								width: 1px;
								background-color: @gray;
								content: '';
								position: absolute;
								top: 0;
								right: 0;
								transform: scaleY(.6)
							}
						}						
					}
				}
				.address {
					display: flex;
					justify-content: space-between;
					& > view {
						font-size: @minSize;
						&:nth-of-type(1) {
							flex: 3
						}
						&:nth-of-type(2) {
							flex: 1.5;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
}
</style>
